<template>
  <el-dialog v-model="dialogVisible" title="用户新增/编辑" width="620" draggable>
    <div>
      <el-form ref="ruleFormRef" :model="formInline" label-width="auto" class="demo-ruleForm" size="small" status-icon>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工号">
              <el-input v-model="formInline.name" placeholder="清输入编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input v-model="formInline.name" placeholder="清输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input type="password" v-model="formInline.name" placeholder="清输入性别" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码">
              <el-input type="password" v-model="formInline.name" placeholder="清输入简码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拼音码">
              <el-input v-model="formInline.name" placeholder="清输入签名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="五笔码">
              <el-input v-model="formInline.name" placeholder="清输入签名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="对应人员">
              <div style="display: flex;">
                <p style="padding-right: 10px;">编码：1001</p>
                <p style="padding-right: 10px;">姓名：测试</p>
              </div>
              <el-button type="primary" @click="onShow">选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色授权">
              <el-select v-model="formInline.region" placeholder="请选择科别" multiple clearable>
                <el-option label="Ⅰ类" value="1" />
                <el-option label="Ⅱ类" value="2" />
                <el-option label="Ⅲ类" value="3" />
                <el-option label="Ⅳ类" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
        <el-button type="primary" @click="dialogVisible1 = true" style="color: #fff" color="#20B1EB"
          size="small">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <personnel-dialog ref="pRef" @on-click="onSonData"></personnel-dialog>
</template>
<script setup lang="ts">
import personnelDialog from './personnel-dialog.vue'
const formInline = reactive({
  id: 1, //  id
  name: "李云", // 姓名
  gender: "女", // 性别
  number: "NYK", // 编号
  code: "0101", //
  managementPosition: "无", // 管理职务
  technicalService: "无", // 专业技术服务
  antibacterialPermissions: "有", // 抗菌药物权限
  appointmentAuthority: "无", // 聘任药物权限
  appointment: "无", // 聘任技术服务
  birthDate: "2024-04-11", // 出生日期
  card: "42356666666666669999", // 身份证
  nation: "汉", // 民族
  educationalBackground: "本科", // 学历
  belonging: "住院部", // 所属
  putDate: "2024-04-11", // 建档日期
  tel: "0731-88888888", // 办公室电话
});
const tableData = [
  {
    name: "临床",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "治疗",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "护理",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "西药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "成药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "领药部门",
    state: "门诊/住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
];
const pRef = ref<InstanceType<typeof personnelDialog> | null>(null);
const onShow = () => {
  pRef.value?.openDialog()
}
const onSonData = (item) => {
  console.log(item)
}
console.log(pRef.value?.name)
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped></style>
